<template>
      <div>
            <!-- 头部begin -->
            <div class="head">
                  <!-- 固定定位部分begin -->
                  <div class="top">
                      <div class="localPosition">
                          南京市
                          <i class="localItem"></i>
                      </div>
                        <div class="chatBox">
                              <i class="chat"></i>
                        </div>
                  </div>
                  <!-- 固定定位结束 -->

                  <!-- 搜索框部分begin -->
                  <div class="topSearchBox">
                        <div class="topSearch">
                              <img :src="topSearch.imgsrc" alt="" class="searchImg">
                              <span>{{topSearch.search}}</span>
                        </div>
                        <ul class="searchLists">
                              <li v-for="list in topSearch.data" :key="list.id">{{list.title}}</li>
                        </ul>
                  </div>
                  <!-- 搜索框部分end -->
            </div>
            <!-- 头部end -->
            
            <!-- 主要分类部分 begin -->
            <ul id="mainItems">
                  <li v-for="list in mainLists" :key="list.id" class="itemList">
                        <img :src="list.imgsrc" class="listImg">
                        <p>{{list.title}}</p>
                  </li>
            </ul> 
            <!-- 主要分类部分 end -->

            <!-- 轮播图部分 begin -->
            <div class="swiperBox">
                  <div class="swiper-container">
                        <div class="swiper-wrapper">
                              <div class="swiper-slide" v-for="img in swiper" :key="img.id"><img :src="img.imgsrc" class="swiperImg"></div>
                              <div class="swiper-slide"></div>
                              <div class="swiper-slide"></div>
                              <div class="swiper-slide"></div>
                              <div class="swiper-slide"></div>
                              <div class="swiper-slide"></div>
                              <div class="swiper-slide"></div>
                              <div class="swiper-slide"></div>
                        </div>
                        <!-- 如果需要分页器 -->
                        <div class="swiper-pagination"></div>
                  </div>
            </div>
           <!-- 轮播图 end -->

            <!-- 夏日大作战部分 begin -->
            <div id="summerBox">
                  <img v-for="img in summer" :key="img.id" :src="img.imgsrc" class="summerImg">
            </div> 
            <!-- 夏日大作战 end -->

            <!-- 打折 begin -->
            <ul id="salesBox">
                  <li v-for="list in sales" :key="list.id" class="salesList">
                        <h3 class="salesTitle">{{list.title}}</h3>
                        <span class="salesText">{{list.text}}</span>
                        <img :src="list.imgsrc" class="salesImg">
                  </li>
            </ul>
            <!-- 打折 end -->

            <!-- 秒杀 begin -->
            <div id="secWapper">
                  <div class="secTitleBox"><router-link to
                  ="/index" class="moreText">更多<img src="/static/img/gt.png" class="secMore"></router-link></div>
                  <div>
                        <ul id="secKillBox">
                              <li v-for="list in seckill" :key="list.id" class="secKillList">
                                    <img :src="list.imgsrc" class="secKillImg">
                                    <div class="secKillTitle">{{list.shop}}-{{list.title}}</div>
                                    <p class="secKillPrice"><i>¥</i><b class="nowPrice">{{list.nowPrice}}</b></p>
                                    <h3 class="secKillPrePrice"><i>¥</i><span class="prePrice">{{list.prePrice}}</span></h3>
                              </li>
                              <li class="secMoreText">查看更多</li>
                        </ul>
                  </div>
            </div>
            <!-- 秒杀 end -->

            <!-- 中间优惠券begin -->
            <div class="couponWrap">
              <img :src="img.imgsrc" alt="" v-for="img in coupon" :key="img.id" class="couponImg">
            </div>
            <!-- 中间优惠券end -->
            <!-- 中间轮播图部分 begin -->
            <div class="swiperBox">
                  <div class="swiper-container">
                        <div class="swiper-wrapper">
                              <div class="swiper-slide" v-for="img in swiperSec" :key="img.id"><img :src="img.imgsrc" class="swiperImg"></div>
                              <div class="swiper-slide"></div>
                              <div class="swiper-slide"></div>
                              <div class="swiper-slide"></div>
                        </div>
                        <!-- 如果需要分页器 -->
                        <div class="swiper-pagination"></div>
                  </div>
            </div>
           <!-- 中间轮播图 end -->

            <!-- 附近的店铺 begin -->
            <div class="nearShop">
              <span class="nearShopText">附近的店铺</span>
            </div>
            <!-- 附近的店铺 begin --> 

            <!-- 店铺加载begin -->
            <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
                <div class="shopWrap" v-for="shop in shops" :key="shop.id"> 
                    <img :src="shop.shop.shopImg" class="shopLogo">
                    <div class="shopDetailsWrap">
                    <div class="shopDetails">
                        <router-link :to='{name:"shop",params:{shopInfo:shop}}' class="shopName">{{shop.shop.shopName}}</router-link>
                        <div class="shopScroll">
                            <img :src="shop.starsrc">
                            <span class="salesCount">{{shop.salesCount}}</span>
                            <span class="salesTime">{{shop.times}}|{{shop.distances}}</span>
                        </div>
                        <div class="shopScroll">
                            <span class="shopBegin">{{shop.beginSend}}|{{shop.translate}}</span>
                            <span :class="shop.dada=='达达专送'?'dadaDeliver':'sellerDeliver'">{{shop.dada}}</span>
                        </div>
                    </div>
                    <div class="stitcksBox heightSet">
                        <div v-for="list in shop.sticks" :key="list.stickId" class="stickList">
                            <span class="sticksType" :class="list.classes=='满减'?'getReduce':(list.classes=='返券'?'getReturn':'getSticks')">{{list.classes}}</span>
                            <span>{{list.des}}</span>
                        </div>
                        <div class="upIconBox" @click="downIcon">
                          <i class="upIcon"></i>
                        </div>
                    </div> 
                </div>
                </div>
            </div>
            <!-- 店铺加载end -->
            <!-- 底部导航栏begin -->
            <footer class="navFooterBox">
              <router-link to="/index" class="firstSelect">首页</router-link>
              <router-link to="/index/list" class="navFooter footerSec">分类</router-link>
              <router-link to="/index/cart" class="navFooter footerThird">购物车</router-link>
              <router-link to="/index/order" class="navFooter footerForth">订单</router-link>
              <router-link to="/index/mine" class="navFooter footerFive">我的</router-link>
            </footer>
            <!-- 底部导航栏end -->
      </div>
</template>
<script>
import Swiper from "swiper";
import "swiper/dist/css/swiper.min.css";
import "swiper/dist/js/swiper.min.js";
export default {
  data() {
    return {
      mainLists: [],
      topSearch:{},
      swiper:[],
      summer:[],
      sales:[],
      seckill:[],
      coupon:[],
      swiperSec:[],
      shops:[],
      busy: false
    };
  },
  methods: {
      //   主要分类方法
    showItem() {
      this.jq.get(this.apiurl + "/index/mainLists").done(result => {
        if (result.error == 0) {
          this.mainLists = result.data;
        }
      });
    },
      // 头部搜索框方法
    showTopSearch() {
      this.jq.get(this.apiurl + "/index/topSearch").done(result => {
        if (result.error == 0) {
          this.topSearch = result.data;
        }
      });
    },
      // 轮播图方法
    showSwiper(){
      this.jq.get(this.apiurl + "/index/swiper").done(result => {
        if (result.error == 0) {
          this.swiper = result.data;
        }
      });
    },
      // 夏日大作战方法
     showSummer(){
      this.jq.get(this.apiurl + "/index/summer").done(result => {
        if (result.error == 0) {
          this.summer = result.data;
        }
      });  
    },
      // 打折部分方法
      showSales(){
          this.jq.get(this.apiurl + "/index/sales").done(result => {
            if (result.error == 0) {
            this.sales = result.data;
            }
      });  
      },
      // 秒杀部分方法
      showSeckill(){
          this.jq.get(this.apiurl + "/index/seckill").done(result => {
            if (result.error == 0) {
            this.seckill = result.data;
            }
      });  
      },
      // 中间优惠券部分
     showCoupon(){
          this.jq.get(this.apiurl+'/index/coupon').done(result=>{
            if(result.error==0){
              this.coupon=result.data
            }
          })
     },
    //  中间轮播图部分
     showSwiperSec(){
          this.jq.get(this.apiurl+'/index/swiperSec').done(result=>{
            if(result.error==0){
              this.swiperSec=result.data
            }
          })
     },
    //  加载店铺方法
     showShopLoading(){
       this.jq.get(this.apiurl+'/index/shopLoading').done(result=>{
         if(result.error==0){
           this.shops=this.shops.concat(result.data)
         }
       })
     },
    //  加载更多方法
     loadMore: function() {
      this.busy = true;
      setTimeout(() => {
        this.showShopLoading()
        this.busy = false;
      }, 1000);
    },
    // 下拉菜单方法
    downIcon(){
      this.jq(event.target).toggleClass('toogleIcon');
      this.jq(event.target).closest('.stitcksBox').toggleClass('heightSet')
     
    },
  },
  created() {
    // 调用显示主要分类方法
    this.showItem();
    // 调用顶部搜索框方法
    this.showTopSearch();
    // 调用轮播方法
    this.showSwiper();
    // 调用夏日大作战方法
    this.showSummer();
    // 调用折扣方法
    this.showSales();
    // 调用秒杀方法
    this.showSeckill();
    // 调用中间优惠券方法
    this.showCoupon();
    // 调用加载店铺方法
    this.showShopLoading();
    // 调用中间轮播图方法
    this.showSwiperSec()
    // 设置window的scroll事件,固定顶部
    this.jq(window).scroll(() => {
      let st=this.jq(document).scrollTop()/222;
      let ht=this.jq(document).scrollTop()/100;
      if(st>0){st=0.6+st;this.jq('.chatBox').addClass('chatRemove')}
      if(st==0){this.jq('.chatBox').removeClass('chatRemove').addClass('chatAdd')}
      if(st>1 || st==0){st=1}
      if(ht>1 || st==0){ht=1}
      this.jq('.top').css('opacity',st)
      this.jq('.header').css('opacity',(1-ht))
    });
  },
  mounted() {
    // swiper插件的配置
    var mySwiper = new Swiper(".swiper-container", {
      direction: "horizontal",
      loop : true,
      autoplay:true,
      
      // 如果需要分页器
      pagination: {
        el: ".swiper-pagination",
        clickable:true,
      },

    });
  }
};
</script>
<style>
/* 头部搜索框和固定定位部分 */
.head {
  height: 9.2rem;
  background: url("/static/img/topbg.jpg");
  overflow: hidden;
}
/* 头部固定定位部分begin */
.top {
  height: 3.6rem;
  background: url("/static/img/toptop.png");
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 999;
}
.localPosition{
  float: left;
  background: url('/static/img/search.png') no-repeat left 13px;
  height: 3.6rem;
  line-height: 3.6rem;
  background-size: 1.6rem auto;
  margin-left: 1rem;
  font-size: 16px;
  color: #fff;
  text-align: left;
  padding-left:2rem;
}
.localItem{
  display: inline-block;
  width: 0.8rem;
  height:0.7rem;
  background: url('/static/img/topmore.png') no-repeat center top;
  background-size: 100% auto;
}
.chatBox {
  float:right;
  width: 5rem;
  height: 100%;
  background: url("/static/img/chat.png") left center no-repeat;
  background-size: auto 50%;
  margin: 0 -2.3rem 0 auto;
  position: relative;
}
.chat {
  background: url("/static/img/search.png") no-repeat 0 -84px;
  background-size: 100%;
  display: block;
  width: 2.5rem;
  height: 100%;
  margin-left: 2.5rem;
}
.chatAdd{
  margin-right: -2.3rem;
  transition-duration: 1s
}
.chatRemove{
  margin-right: 0.8rem;
  transition-duration: 1s
}
/*头部固定定位end*/


/* 头部搜索框部分begin */
.topSearchBox{
      box-sizing: border-box;
      padding: 0 0.8rem 0 0.8rem
}
.topSearch {
  width: 100%;
  height: 2.8rem;
  margin-top: 4rem;
  background: white;
  border-radius: 1.5rem;
  text-align: center;
  line-height: 2.8rem;
  font-size: 1.4rem;
  color:#999;
}
.searchImg{
      width: 1.4rem;
      vertical-align: middle;
}
.searchLists {
  display: flex;
  box-sizing: border-box;
  padding: 0 2rem 0 2rem;
  color: white;
  justify-content: space-between;
  height: 2.3rem;
  line-height: 2.2rem;
}
/* 头部搜索框end*/ 

/* 头部主要分类部分 begin */
#mainItems {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  padding:1.2rem 0 1rem 0;
  background: white;

}
.itemList {
  list-style: none;
  width: 20%;
  height: 6.2rem;
  text-align: center;
}
.listImg{
      width: 40px;
      margin-bottom: 0.6rem;
}
/*头部主要分类end*/ 

/*轮播图的设置begin*/
.swiperBox{
      width: 100%;
      box-sizing: border-box;
      padding:0 0.8rem 0 0.8rem;
      background: white;
}
.swiper-container{
      width: 100%;
      font-size: 0;
}
.swiperImg{
      width: 100%;
      height:auto;
      float: left;
}
.swiper-pagination-bullet{
      width: 6px;
      height:6px;
}
.swiper-pagination-bullet-active{
     background: #39ac69
}
/*轮播图的设置end*/ 

/*夏日大作战部分 begin*/ 
#summerBox {
  padding: 0 0.8rem 0 0.8rem;
  box-sizing: border-box;
  padding-top: 1.7rem;
  background: white;
}
.summerImg {
  width: 50%;
}
/*夏日大作战部分 end*/ 

/*打折部分begin*/ 
#salesBox{
      display: flex;
      height:10rem;
      background: white;
}
.salesList{
      width: 25%;
      text-align: center;
      height: 10rem;
}
.salesTitle{
      margin-top: 0.5rem;
      font-weight: normal;
      font-size: 1.4rem;
      margin-bottom: 0.3rem;
}
.salesText{
      color: #FF5757;
      font-size: 1rem;
}
.salesImg{
      margin-top: 0.8rem;
      width: 57%;
}
/*打折部分end*/ 

/*秒杀部分 begin*/ 
/* 秒杀标题部分*/ 
#secWapper{
  padding-top: 1rem;
  padding-bottom: 1rem;
  background: white;
}
.secTitleBox{
  height: 3.4rem;
  box-sizing: border-box;
  padding: 0.4rem 0.8rem 0.4rem 0.8rem;
  background: url('/static/img/seckill.png') no-repeat 0.8rem center;
  background-size: auto 50%;
  text-align: right;
  line-height: 2.6rem
}
.moreText{
  color: #ff5757;
  font-size: 1rem;
}
.secMore{
  width: 0.6rem;
  margin-left: 0.45rem;
}
/*秒杀导航部分*/ 
#secKillBox{
     display: flex;
     overflow-y: hidden;
     overflow-x: auto;
     margin: 0 0.8rem 0 0.8rem
}
.secKillList{
  width: 6.7rem;
  margin-right: 1rem;
  position: relative;
  flex: 0 0 auto
}
.secKillImg{
  width: 90%;
}
.secKillTitle{
  width: 100%;
  white-space: nowrap;;
  overflow: hidden;
  text-overflow: ellipsis;
  background: rgba(255,87,87,0.6);
  font-size: 9px;
  color: white;
  height: 1.1rem;
  line-height: 1.1rem;
  border-radius: 0.55rem;
  box-sizing: border-box;
  padding: 1px 5px;
  position: absolute;
  top:5.2rem;
}
.secKillPrice{
  color:#ff5757;
  text-align:center;
}
.nowPrice{
  font-size: 16px;
}
.secKillPrePrice{
  color:#999;
   text-align:center;
}
.prePrice{
  text-decoration: line-through;
}
.secMoreText{
  background: url('/static/img/seckill-more.png') no-repeat left center;
  background-size: 2rem;
  padding-left: 3rem;
 padding-top: 2.5rem;
 color:#999
}
/*秒杀部分 end*/ 

/*中间优惠券部分begin*/ 
.couponWrap{
  width: 100%;
  box-sizing: border-box;
  padding: 0 0.8rem 0 0.8rem;
  padding-bottom: 0.2rem;
  background: white;
}
.couponImg{
  width: 100%;
}
/*中间优惠券部分end*/ 

/*附近的店铺begin*/
.nearShop{
  width:100%;
  height:4.4rem;
  position: relative;
  text-align: center;
  background: white;
}
.nearShop:before{
  content:'';
  display:block;
  width:228px;
  height:1px;
  background:#333;
  position:absolute;
  top:50%;
  left:50%;
  margin-left: -114px;
} 
.nearShopText{
  display: inline-block;
  color: #333;
  height: 50px;
  font-size: 17px;
  font-weight: bold;
  background: white;
  line-height: 50px;
  margin: 0 auto;
  position: relative;
  padding: 0 5px
}
/*附近的店铺end*/ 

/*店铺详情部分begin*/ 
.shopWrap{
  display: flex;
  box-sizing: border-box;
  padding: 2.4rem 0.8rem 1.3rem 0.8rem;
  /* padding: 1.3rem 0 1.3rem 0; */
  border-top:1px solid rgba(232,232,232,0.5);
  background: white;
}
.shopLogo{
  width:64px;
  margin-right:8px;
  border-radius: 4px;
  border: 1px solid #e8e8e8;
  height: 64px;
}
.shopDetailsWrap{
  flex:1
}
.shopName{
  font-size: 15px;
  color:#333;
  display: block;
}
.shopScroll{
  margin-top:8px;
}
.salesCount{
  color:#999;
  font-size: 1rem;
  margin-left: 2px;
}
.salesTime{
  font-size: 10px;
  color:#999;
  float: right;
} 
.shopBegin{
  color:#999;
  font-size: 1rem;
}
.stitcksBox{
  border-top:1px dotted #ccc;
  margin-top:1rem;
  position: relative;
  overflow: hidden;
}
.heightSet{
  height: 52px;
}
.sellerDeliver{
  float: right;
  font-size: 10px;
  padding:0 2px;
  border-radius: 2px;
  height: 15px;
  color: #999;
  border: 1px solid #b6b6b6;
}
.dadaDeliver{
  float: right;
  font-size: 10px;
  padding:0 2px;
  border-radius: 2px;
  height: 15px;
  border: 1px solid #16A9ff;
  color: #16a9ff;
}
.stickList{
  margin-top: 10px;
  font-size: 10px;
  position: relative;
  color: #999999;
}
.sticksType{
  padding: 0 2px;
  margin-right: 4px;
  border-radius: 2px;
  color: #ffffff;
  height: 14px;
  line-height: 14px;
}
.getSticks{
  background: #FF6C57;
}
.getReduce{
  background: #5FBC65
}
.getReturn{
  background: #ffa800;    
}
.getFirst{
  background: #FF6C57;
}
.upIconBox{
  position: absolute;
  top:1rem;
  right: 0;
  width: 14%;
  height: 40px;
  text-align: right;
  vertical-align: top;
}
.upIcon{
  display: inline-block;
  width: 1.6rem;
  height: 1rem;
  background:url('/static/img/up.png');
  background-position:0 -486px;
  background-size: 100% auto;
}
.toogleIcon{
  background-position:0 -462px;
}
/*店铺详情部分end*/ 

/*底部固定导航begin*/ 
.navFooterBox{
  position: fixed;
  z-index: 801;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 50px;
  background: #fff;
  border-top: 1px solid #d9d9d9;
  box-sizing: border-box;
  display: flex;
}

.navFooter{
  display:inline-block;
  width:20%;
  text-align: center;
  font-size: 12px;
  box-sizing: border-box;
  color:#555;
  padding-top: 2.4rem;
}
.footerFirst{
  background:url('/static/img/footer.png') no-repeat center -250px;
   background-size:2rem auto;
}

.footerSec{
  background: url('/static/img/footer.png') no-repeat center -300px;
  background-size:2rem auto;
}
.footerThird{
  background: url('/static/img/footer.png') no-repeat center -350px;
  background-size:2rem auto;
}
.footerForth{
  background: url('/static/img/footer.png') no-repeat center -400px;
  background-size:2rem auto;
}
.footerFive{
  background: url('/static/img/footer.png') no-repeat center -450px;
  background-size:2rem auto;
}
.firstSelect{
  display:inline-block;
  width:20%;
  text-align: center;
  font-size: 12px;
  box-sizing: border-box;
  padding-top: 2.4rem;
  background:url('/static/img/footer.png') no-repeat center 0;
  background-size:2rem auto;
  color: #39ac69;
}
/*底部固定导航end*/ 
</style>

